<template>
  <div id="app" :style="style" >
    <transition name="bounce" mode="out-in">
      <router-view  v-if="isRouterAlive"></router-view>
    </transition>
    <transition name="bounce" mode="out-in">
      <div v-show='fullscreenLoading'  class="loading">  <!---->
        <div :class="LoadingClass">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div>
    </transition>

  </div>
</template>
<style lang="scss">
  body {
    background: #f4f4fa;
    #main {
      width: 100%;
    }
   
  }

  .loading {
    position: fixed;
    z-index: 9999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: rgba(204, 204, 204, 0.6);
    text-align: center;

    .load_div {
      position: relative;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 300px;
      height: 92px;
      //background: url('/static/img/logobg.png') no-repeat;
      -webkit-background-size: 100%;
      background-size: 100%;
      position: relative;

      span {
        display: inline-block;
        width: 36px;
        height: 32px;
        background: url('/static/img/V.png') no-repeat;
        -webkit-background-size: 100%;
        background-size: 100%;
        position: absolute;
        bottom: 27px;
        left: 13px;
        animation: Scale 1s steps(120) infinite;
      }

      span:nth-child(2) {
        background: url('/static/img/M.png') no-repeat;
        -webkit-background-size: 100%;
        background-size: 100%;
        left: 57px;
        animation-delay: .142s;
      }

      span:nth-child(3) {
        background: url('/static/img/A.png') no-repeat;
        -webkit-background-size: 100%;
        background-size: 100%;
        left: 102px;
        animation-delay: .285s;
      }

      span:nth-child(4) {
        background: url('/static/img/T.png') no-repeat;
        -webkit-background-size: 100%;
        background-size: 100%;
        left: 143px;
        animation-delay: .428s;
      }

      span:nth-child(5) {
        background: url('/static/img/R.png') no-repeat;
        -webkit-background-size: 100%;
        background-size: 100%;
        left: 179px;
        animation-delay: .571s;
      }

      span:nth-child(6) {
        background: url('/static/img/I.png') no-repeat;
        -webkit-background-size: 100%;
        background-size: 100%;
        left: 213px;
        animation-delay: .714s;
      }

      span:nth-child(7) {
        background: url('/static/img/X.png') no-repeat;
        -webkit-background-size: 100%;
        background-size: 100%;
        left: 242px;
        animation-delay: .857s;
      }

      @keyframes Scale {
        30% {
          transform: scale(1)
        }
        50% {
          transform: scale(1.5);
        }
        70% {
          transform: scale(1)
        }
      }
    }
  }

  @keyframes rotate {0%{transform:rotate(360deg)}}
  @keyframes wink {50%{opacity:0}}
  .spinner{
    span{
      display: none;
    }
    width:7em;  
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  	position:absolute;
    &:before{
  		content:"";
  		display:block;
      width:7em;
      height:1em;
      margin:3em auto;
      padding:3em 0;
      border-radius:50%;
      position: relative;
      left:-2px;
      border:2px solid #fff;
      
      border-top:2px solid transparent;
      border-bottom:2px solid transparent;
      animation:rotate 1s ease infinite;
    }
    &:after{
      content:"Loading";
      position:absolute;
  		top:50%;
      transform: translateY(-50%);
      left:2px;
      color:#fff;
      font:.9em sans-serif;
      width: 100%;
     
      text-align:center;
      animation:wink 1.4s ease infinite;
    }
  }

.el-message {
  top: 40% !important;
}
.bounce-enter-active {
  animation: bounce-in 0.2s;
}
.bounce-leave-active {
  animation: bounce-in 0.2s reverse;
}
@keyframes up {
  0%   { margin-bottom: 0; }
  16%  { margin-bottom: 100%; height: 5px; }
  50% { margin-bottom: 0; }
  100% { margin-bottom: 0; }
}

@keyframes bounce-in {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>
<script>
import '@/style/style.scss'
import config from '@/config/config'
export default {
  name: "app",
  provide() {
    return {
      reload: this.reload
    };
  },
  data() {
    return {
      style: "height:100%;",
      isRouterAlive: true,
      fullscreenLoading:false,
      LoadingClass:'',
    };
  },
  created() {
    if(localStorage.PersonConfig) {
      this.LoadingClass=JSON.parse(localStorage.PersonConfig).logo?'spinner':'load_div';
    } else{
      this.LoadingClass='load_div';
    }
    this.$Bus.$on('PersonChange',()=>{
      if(localStorage.PersonConfig) {
        this.LoadingClass=JSON.parse(localStorage.PersonConfig).logo?'spinner':'load_div';
      } else{
        this.LoadingClass='load_div';
      }
    });
    this.$Bus.$on('Loading',(el)=>{
      if(el===true || el===false)
        this.fullscreenLoading=el
    })
  },
  beforeDestroy(){
    this.$Bus.$off('PersonChange');
    this.$Bus.$off('Loading');
  },
  mounted(){
  
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(() => {
        this.isRouterAlive = true;
      });
    },
  }
};
</script>
<style lang="scss">
@import "./static/style/style.scss";
</style>
